<template>
    <main>
        <section class="malus-download-hero">
            <div class="container malus-download-banner"><img class="malus-downlaod-device"
                                                              :src="heroPath"
                                                              alt="bannerimg">
                <div class="malus-download-jumbotron"><h1>{{$t('down_banner_title')}}</h1>
                    <p>{{$t('down_banner_desc')}}</p><a
                        class="malus-download-btn" id="pc" href="/windows"
                        style="display: flex;"><i class="ri-windows-fill"></i> <span>{{$t('down_banner_button')}}</span> </a><a
                        class="malus-download-btn"  id="ios" href="/ios"><img
                        src="/../assets/ic36_apple.bd09a.svg" alt="appcion"> <span>立即安装 iOS 版</span> </a><a
                        class="malus-download-btn"  id="android" href="/android"><img
                        src="/../assets/ic36_android.53956.svg" alt="appcion"> <span>立即安装 Android 版</span></a></div>
            </div>
        </section>

        <Downloads></Downloads>

        <Features></Features>

        <UserComment></UserComment>

        <Support></Support>

        <RegisterBanner></RegisterBanner>
    </main>
</template>

<script>
import Downloads from "@/components/Downloads";
import Features from "@/components/Features";
import UserComment from "@/components/UserComment";
import Support from "@/components/Support";
import RegisterBanner from "@/components/RegisterBanner";

export default {
    name: "Download",
    components: {RegisterBanner, Support, UserComment, Features, Downloads},
    data() {
        return {
            heroPath: require('@/assets/platform_device.6c624.png'),
            features: [
                {
                    img: require('@/assets/features_1.4266c.svg'),
                    title: '全球精选专线',
                    desc: 'Malus 提供全球专业回国线路，不断升级维护提高带宽，满足任何地区和国家的海外华人回国加速需求'
                },
                {
                    img: require('@/assets/features_2.c4b30.svg'),
                    title: '无限流量',
                    desc: '不管是VIP还是免费用户，Malus不做任何流量限制，看视频听音乐无需因为用量而焦虑'
                },
                {
                    img: require('@/assets/features_3.5d421.svg'),
                    title: '高清播放',
                    desc: 'Malus 使用独创的全球回国节点边缘加速技术，能够做到服务器智能分流，专业稳定，看视频高清不卡顿'
                },
                {
                    img: require('@/assets/features_4.b64ac.svg'),
                    title: '智能选线',
                    desc: '根据用户地理位置，智能识别最优线路，减少手动切换线路流畅，只需一键即可锁定最快线路回国'
                },
                {
                    img: require('@/assets/features_5.cb873.svg'),
                    title: '多场景切换',
                    desc: '满足多需求场景，音视频、游戏、直播随意切换，独创增强模式，玩国服游戏也可以直播、听音乐'
                },
                {
                    img: require('@/assets/features_6.7c1b7.svg'),
                    title: '游戏加速',
                    desc: '精选回国游戏加速线路，加速各类在线国服游戏，低延迟超稳定，一个账号多平台使用'
                },
                {
                    img: require('@/assets/features_7.c92f9.svg'),
                    title: '全平台支持',
                    desc: 'Malus 支持iOS、Android、macOS、Windows、TV多平台安装使用，最多支持个人3台设备同时运行'
                },
                {
                    img: require('@/assets/features_8.06614.svg'),
                    title: '全方位客服支持',
                    desc: '我们把每个用户当作朋友，任何使用问题都可得到及时回复与解决，我们相信好产品少不了好的支持'
                }
            ]
        }
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    main {
        .malus-download-hero {
            margin-top: 68px;
        }

        .malus-download-banner:before {
            width: 100% !important;
        }

        .malus-download-banner {
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
            height: auto !important;
            padding: 0 25px;
            position: relative;
            display: flex;

            .malus-download-jumbotron {
                margin: 0 0 48px !important;
                align-items: center;
                justify-content: center;
                text-align: center;

                h1 {
                    font-size: 42px !important;
                    margin: 64px 0 24px !important;
                }

                a {
                    margin: auto;
                }
            }

            img {
                width: 92% !important;
                margin: 24px auto 104px !important;
            }
        }
    }
}

main {
    .malus-download-hero {
        position: relative;
        z-index: 1;
        margin-top: 68px;
        background-color: #fbfbff;

        .malus-download-banner {
            position: relative;
            display: flex;
            align-items: center;
            height: 510px;

            img {
                position: relative;
                z-index: 2;
                display: block;
                width: 460px;
                height: auto;
                margin-top: -32px;
                filter: drop-shadow(0 25px 80px rgba(0, 0, 0, .15));
            }
        }

        .malus-download-banner:before {
            content: "";
            z-index: 1;
            display: block;
            width: 850px;
            height: 452px;
            background: url(../assets/elements_maps_main.84816.svg) no-repeat;
            position: absolute;
            left: 0;
            top: 30px;
            opacity: .6;
        }

        .malus-download-jumbotron {
            position: relative;
            z-index: 2;
            margin-left: 88px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            color: #333;
            margin-top: -48px;

            h1 {
                font-size: 48px;
                font-weight: 400;
                margin: 0 0 24px -2px;
            }

            p {
                font-size: 16px;
                font-weight: 400;
                line-height: 1.5;
                margin-bottom: 24px;
                color: #7b7b7b;
            }

            a {
                margin-top: 12px;
                display: none;
                align-items: center;
                justify-content: center;
                height: 50px;
                font-size: 14px;
                font-weight: 500;
                color: #fff;
                border-radius: 6px;
                transition: all .2s ease;
                background: #4d55e8;
                padding: 0 24px 0 18px;

                i {
                    font-size: 24px;
                    margin-right: 6px;
                }
            }
        }
    }

}
</style>
